<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!--
      现在想传items值给组件中？怎么办？
          1）遍历
          2）利用中间商，将遍历后的值 绑定中间商的值。
  -->
  <Wind v-for="item in items" v-bind:val="item"></Wind>
</div>
</body>
<!--
    Vue组件和Vue对象是平级关系，它们数据不能互通。就像一个<script></script>和另外一个<script></script>标签中的变量不能互通一样。
    怎么搞呢？需要一个中间商。组件中的 props 属性，来给组件中传递值。
-->
<script>
  // 这是一个Vue组件
  Vue.component("Wind", {  // 命名不能用中文
    props: ['val'],
    template: "<li>{{val}}</li>"
  })

  // 这是一个Vue对象
  var vm = new Vue({
    el: "#app",
    data: {
      items: ["Java", "Web", "Linux", "MySQL"]
    }
  })
</script>
</html>